<template>
  <div class="book_page">

    <!-- 导航 开始 -->
    <nav-bar title="我的预约"></nav-bar>
    <!-- 导航 end -->

    <!-- 预约列表 开始 -->
    <div class="list_box">
      <template v-if="list && list.length">
        <div class="book_cell" v-for="(item, index) in list" :key="index">
          <div class="head">
            <div class="hospital" v-if="item.type == 1">
              <img src="@/assets/images/my/hospital.png" class="img" alt="">
              <span class="name">{{item.hospitalName}}</span>
            </div>
            <div class="doctor" v-if="item.type == 2">医生：{{ item.doctorName }}</div>
            <div class="doctor goods" v-if="item.type == 3">商品：{{ item.goodsName }} <span class="unit">￥</span><span class="price">{{ item.goodsPrice }}</span></div>
          </div>
          <div class="content">
            <div class="cell">
              <span class="name">您的姓名：</span>
              <span class="txt">{{ item.name }}</span>
            </div>
            <div class="cell">
              <span class="name">联系电话：</span>
              <span class="txt">{{ item.phone }}</span>
            </div>
            <div class="cell">
              <span class="name">预约留言：</span>
              <span class="txt">{{ item.leaveWord }}</span>
            </div>
            <div class="cell">
              <span class="name">提交时间：</span>
              <span class="txt">{{ item.createdDate }}</span>
            </div>
          </div>
        </div>
      </template>
      <no-data title="暂无预约" v-else></no-data>
    </div>
    <!-- 预约列表 end -->

  </div>
</template>
<script>
import { GET_PERSONAL_MYAPPOINTMENT } from "@/http/interface";
export default {
  data() {
    return {
      list: [],
    };
  },
  async asyncData({ $axios }) {
    let res = await $axios.get(GET_PERSONAL_MYAPPOINTMENT);
    let list = res.data || [];
    console.log(res);
    return { list };
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/my/book.less";
</style>